<template>
  <div class="home">
    axios拦截器
  </div>
</template>

<script>
import axios from "axios";

export default {
  //拦截器，在请求或响应被处理前拦截

  //分为请求拦截器，响应拦截器
  name: "demo6",
  components: {},
  created() {

    //请求拦截器:
    axios.interceptors.request.use(
      config=>{
        // 在发送请求前做的事情
        return config
      },err=>{
        // 在请求错误的时候做些什么(比如接口没有返回后端报404等)
        return Promise.reject(err)
      }
    )
    
    //响应拦截器：
    axios.interceptors.response.use(res=>{
      // 请求成功对响应数据做处理
      return res
    },err=>{
      //响应错误做些什么
      return Promise.reject(err)
    })
    // 取消拦截器(了解即可)
    let interceptors=axios.interceptors.request.use(config=>{
      config.headers={
        auth:true
      }
      return config
    })
    // 取消的方法：
    axios.interceptors.request.eject(interceptors)

    // 实际开发例子
    // 登录状态会返回(token:'')
    // 有些接口需要登录状态才可以访问

    // 一般开发的时候都是给实例添加拦截器
    let instance=axios.create({})
    instance.interceptors.request.use(
      config=>{
        config.headers.token=''
        return config
      }
    )
    // 用这个实例访问不需要token的接口
    let newInstance=axios.create({

    })

    //移动端开发(添加loading)
    let instance_mob=axios.create({})
    // instance_mob.interceptors.request.use(config=>{
    //   // 在请求前展示等待弹窗
    //   $('#modal').show()
    //   return config
    // })
    // instance_mob.interceptors.response.use(res=>{
    //   // 请求成功了隐藏弹窗
    //    $('#modal').hide()
    //    return res
    // })
  }
};
</script>
